<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive table example</title>
    <style>
      table {
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid black;
        padding: 0.3em 0.5em;
      }

      table {
        inline-size: 100%;
      }

      @media (max-width: 480px) {
        table,
        thead,
        tbody,
        tr,
        th,
        td {
          display: block;
        }

        thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }

        tr {
          margin-block-end: 1em;
        }
      }
    </style>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>Country</th>
          <th>Region/Farm</th>
          <th>Tasting notes</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Nicaragua</td>
          <td>Matagulpa</td>
          <td>Dark chocolate, almond</td>
          <td>$13.95</td>
        </tr>
        <tr>
          <td>Ethiopia</td>
          <td>Yirgacheffe</td>
          <td>Sweet tea, blueberry</td>
          <td>$15.95</td>
        </tr>
        <tr>
          <td>Ethiopia</td>
          <td>Nano Challa</td>
          <td>Tangerine, jasmine</td>
          <td>$14.95</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
